<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 公共的CSS库 -->
<head th:include="/site/common/common_head :: commonHead"></head>

<title>[[${article.title}]] - Tumo Blog</title>

<body gtools_scp_screen_capture_injected="true">
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->

<!-- header -->
<div th:replace="site/header :: header"></div>

<link rel="stylesheet" th:href="@{/plugins/css/default.min.css}"/>

<!-- main -->
<article class="main-content page-page" itemscope itemtype="http://schema.org/Article">
    <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
            <a th:href="'/article/' + ${article.id}" th:text="${article.title}"></a>
        </h1>
        <div class="post-data">
            <time datetime="2017-02-25" itemprop="datePublished">发布于 [[${#dates.format(article.publishTime, 'yyy-MM-dd')}]]
            </time>
            / <a th:href="'/category/' + ${article.category}" th:text="${article.category}"></a> / <a
                href="#comments"><b th:text="${commentsCount}"></b> 条评论</a> /
            <b th:text="${article.eyeCount}"></b> 浏览
        </div>
    </div>
    <div id="post-content" class="post-content" itemprop="articleBody" th:utext="${article.content}"></div>
    <div class="post-content">
        <p class="post-info">
            本文由 <a href="/" th:text="${article.author}"></a> 创作，采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="external nofollow">知识共享署名4.0</a> 国际许可协议进行许可<br>本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名<br>最后编辑时间为:
            [[${#dates.format(article.editTime, 'yyy-MM-dd')}]]
        </p>
    </div>
</article>
<div id="directory-content" class="directory-content">
    <div id="directory"></div>
</div>
<!-- 留言信息 -->
<div class="comment-container">
    <div id="comments" ref="comments" class="clearfix">
        <span class="response"></span>
        <!-- 表单 -->
        <form method="post" id="comment-form" class="comment-form" onsubmit="return TumoComment.subComment();">
            <input hidden="hidden" name="articleId" id="articleId" th:value="${article.Id}"/>
            <input hidden="hidden" name="articleTitle" id="articleTitle" th:value="${article.title}"/>
            <input maxlength="12" name="author" id="author" class="form-control input-control clearfix" placeholder="姓名 (*)" value="" required/>
            <input type="email" name="email" id="email" class="form-control input-control clearfix" placeholder="邮箱 (*)" value="" required/>
            <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="网址 (http://)" value=""/>
            <textarea name="content" id="content" class="form-control" placeholder="回复" required minlength="5" maxlength="2000"></textarea>
            <button class="submit" id="misubmit">提交</button>
        </form>

        <!-- 列表 -->
        <ol class="comment-list" th:if="${talkList.total} >= 0">
            <li th:each="comment : ${talkList.rows}" th:id="'li-comment-' + ${comment.parent.id}"
                class="comment-body comment-parent comment-odd">
                <div th:id="'comment-' + ${comment.parent.id}">
                    <div class="comment-view">
                        <div class="comment-header">
                            <img class="avatar" src="http://phfvf87ik.bkt.clouddn.com/author.jpg"
                                 th:title="${comment.parent.url}" width="80" height="80">
                            <span class="comment-author">
                                    <a th:href="${comment.parent.url}" target="_blank" rel="external nofollow" th:text="${comment.parent.author}"></a>
                                </span>
                        </div>
                        <div class="comment-content">
                            <span class="comment-author-at"></span>
                            <p><p th:text="${comment.parent.content}"></p></p>
                        </div>
                        <div class="comment-meta">
                            <time class="comment-time" th:text="${#dates.format(comment.parent.time, 'yyyy-MM-dd')}"></time>
                            <span class="comment-reply">
                                <a rel="nofollow" th:onclick="'javascript:TumoComment.reply(\'' + ${comment.parent.author} + '\',\'' + ${comment.parent.id} + '\');'">回复</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div th:if="${comment.childrenList} != '[]'" class="comment-children">
                    <ol class="comment-list">
                        <li th:each="item : ${comment.childrenList}" th:id="'li-comment-' + ${item.id}"
                            class="comment-body comment-child comment-level-odd comment-odd">
                            <div th:id="'comment-' + ${item.id}">
                                <div class="comment-view">
                                    <div class="comment-header">
                                        <img class="avatar"th:title="${item.url}" src="http://phfvf87ik.bkt.clouddn.com/author.jpg" width="80" height="80">
                                        <span class="comment-author comment-by-author">
                                            <a th:href="${item.url}" target="_blank" rel="external nofollow" th:text="${item.author}"></a>
                                        </span>
                                    </div>
                                    <div class="comment-content">
                                        <span class="comment-author-at">
                                            <a th:href="'#comment-' + ${item.cId == 0 ? item.pId : item.cId}" th:text="${item.authorId}"></a>
                                        </span>
                                        <p><p th:text="${item.content}"></p></p>
                                    </div>
                                    <div class="comment-meta">
                                        <time class="comment-time" th:text="${#dates.format(item.time, 'yyyy-MM-dd')}"></time>
                                        <span class="comment-reply">
                                            <a rel="nofollow" th:onclick="'javascript:TumoComment.reply(\'' + ${item.author} + '\',\'' + ${item.pId} + '\',\'' + ${item.id} + '\');'">回复</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ol>
                </div>
            </li>
        </ol>
        <div class="lists-navigator clearfix">
            <ol class="page-navigator" th:if="${talkList.total > 0}">
                <li class="prev" th:if="${cp} gt '1'">
                    <a th:href="'?cp=' + ${cp < 1 ? cp : cp-1} + '#comments'">←</a>
                </li>
                <li th:each="i : ${#numbers.sequence(1, talkList.total)}">
                    <a th:style="${i == cp ? 'color: #eb5055;' : ''}" th:href="'?cp=' + ${i} + '#comments'" th:text="${i}"></a>
                </li>
                <li class="next" th:if="${cp < talkList.total}">
                    <a th:href="'?cp=' + ${cp < talkList.total ? cp+1 : talkList.total} + '#comments'">→</a>
                </li>
            </ol>
        </div>
    </div>
</div>

<!-- footer -->
<div th:replace="site/footer :: footer"></div>
<!-- 公共的JS库 -->
<div th:include="site/common/onload_js ::onloadJS"></div>
</body>
<script type="text/javascript" th:src="@{/site/js/content.js}"></script>
</html>